<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button data-clipboard-text="我的天1" class="btn">点我拷贝</button>

    <button data-clipboard-text="我的天2" class="btn">点我拷贝</button>

    <input type="text" id="input" />
    <button data-clipboard-target="#input" data-clipboard-action="cut" class="btn">
      点我拷贝Input输入框的value值
    </button>

    <hr />
    <button id="btn1">点我拷贝</button>
    <button id="btn2">撤销拷贝的功能</button>

    <script src="./clipboard.min.js"></script>

    <script>
      new ClipboardJS('.btn')

      let count = 1

      const clip1 = new ClipboardJS(document.querySelector('#btn1'), {
        // text 配置项，返回值的内容，就是拷贝的内容
        text() {
          return 'yyyyy' + ++count
        },
      })
      // 监听拷贝成功的事件
      clip1.on('success', () => {
        console.log('拷贝成功')
      })

      clip1.on('error', (error) => {
        console.log('拷贝失败', error)
      })

      btn2.onclick = () => {
        // 销毁实例，拷贝功能就结束了
        clip1.destroy()
      }
    </script>
  </body>
</html>
